<template>
  <div class="nav">
    <div class="title">国内疫情地图</div>

    <van-tabs v-model="active" animated @change="change">
      <!-- 现存确诊 -->
      <van-tab title="现存确诊">
        <div id="nowmain" style="width: 7.5rem; height: 6rem"></div>
      </van-tab>
      <!-- 累加的人数 -->
      <van-tab title="累加的人数">
        <div id="main" style="width: 7.5rem; height: 6rem"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//1.安装echarts  2.导入echarts
import echarts from "echarts";

import "echarts/map/js/china";

//引入疫情数据Api
import api from "../../../api/index";

export default {
  data() {
    return {
      active: 0,
      arr: [],
    };
  },
  //3.实例创建地图
  mounted() {
    
    api.getChinaData().then((res) => {
      console.log("-------", res.data);
      //获取省份数据
      let citys = res.data.retdata;
      let arr = []; //累计
      let nowArr = []; //现存
      for (let i = 0; i < citys.length; i++) {
        let obj = {};

        obj.name = citys[i].xArea;
        obj.value = citys[i].confirm; //累计确诊人数   curConfirm   //现在确诊的
        let nowObj = {};
        nowObj.name = citys[i].xArea;
        nowObj.value = citys[i].curConfirm;
        nowArr.push(nowObj);
        arr.push(obj);
      }
      console.log(arr);
      this.arr = arr;

      // this.chinaMap('main',arr)
      // this.chinaMap('nowmain',nowArr)
      this.$nextTick(() => {
        console.log("main", document.getElementById("main"));
        console.log("nowmain", document.getElementById("nowmain"));
        // this.chinaMap('main',arr)
        this.chinaMap("nowmain", nowArr);
      });
    });
  },
  methods: {
    change(title) {
      console.log(title);
      if (title == 1) {
        this.$nextTick(() => {
          console.log("main", document.getElementById("main"));
          console.log("nowmain", document.getElementById("nowmain"));
          this.chinaMap("main", this.arr);
        });
      }
    },
    chinaMap(id, arr) {
      var myChart = echarts.init(document.getElementById(id));
      var option = {
        tooltip: {
          //悬浮弹框
          triggerOn: "click", //提示框触发的条件
          enterable: true, //鼠标是否可进入提示框浮层中，默认为false
          formatter(item) {
            //item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d
            return (
              '<a href="/citys/' +
              item.name +
              '" style="color:#fff">省份：' +
              item.name +
              "--" +
              item.value +
              "</a>"
            );
          },
        },
        visualMap: [
          {
            //映射高亮颜色
            orient: "horizontal", //水平的
            type: "piecewise", //离散
            bottom: 0,
            textGap: 4,
            itemGap: 4,
            itemWidth: 10,
            itemHeight: 10,
            padding: 2,
            textStyle: {
              fontSize: 9,
            },
            pieces: [
              // 配置颜色区间
              {
                min: 0,
                max: 0,
                color: "#FFFFFF",
              },
              {
                min: 1,
                max: 9,
                color: "#FAEBD2",
              },
              {
                min: 10,
                max: 99,
                color: "#E9A188",
              },
              {
                min: 100,
                max: 499,
                color: "#D56355",
              },
              {
                min: 500,
                max: 999,
                color: "#BB3937",
              },
              {
                min: 1000,
                max: 10000,
                color: "#772526",
              },
              {
                min: 10000,
                color: "#480F10",
              },
            ],
          },
        ],
        series: [
          {
            name: "省",
            type: "map", //地图  bar  line  map
            map: "china", //中国地图 需要引入地图china.js
            roam: false,
            zoom: 1.2,
            aspectScale: 0.75,
            top: 40,
            layoutCenter: ["5%", "5%"],
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 8,
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "rgba(0,255,236,0)",
                borderColor: "rgba(0,0,0,0.2)",
              },
              emphasis: {
                // 选中的区域颜色及阴影效果等
                areaColor: "rgba(255,180,0,0.8)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
              },
            },

            data: arr,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  margin: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px solid #eee;
}
.title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.26rem;
  margin-right: 0.1rem;
}
#main,
#nowmain {
  background: #f5f5f5;
}
</style>